<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="app">
    <!--        弹出提示-->

    <el-dialog title="添加学生" :visible.sync="dialogresetVisibleaddstudent"  width="800px">
        <el-form :model="newtable">


            <template>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="学号"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                    <el-button @click="toggleSelection()">确定添加</el-button>
                </div>
            </template>



        </el-form>

    </el-dialog>


    <el-dialog title="修改信息" :visible.sync="dialogresetVisible">
        <el-form :model="newtable">
            <el-form-item label="新的班级名称" :label-width="formLabelWidth">
                <el-input v-model="newtable.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新的班级地址" :label-width="formLabelWidth">
                <el-input v-model="newtable.tel" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新的班级教师" :label-width="formLabelWidth">
                <el-input v-model="newtable.email" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogresetVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="新增班级" :visible.sync="dialogFormVisible">
        <el-form :model="user">
            <el-form-item label="班级名称" :label-width="formLabelWidth">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="班级地址" :label-width="formLabelWidth">
                <el-input v-model="user.tel" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="班级教师" :label-width="formLabelWidth">
                <el-input v-model="user.email" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="学生列表" :visible.sync="dialogFormVisiblestudent">

            <el-table :data="studentgridData">
                <el-table-column property="id" label="学生ID" width="150"></el-table-column>
                <el-table-column property="name" label="学生姓名" width="200"></el-table-column>
                <el-table-column property="classid" label="学生班级ID"></el-table-column>
                <el-table-column label="操作">
                    <template slot="header" slot-scope="scope">
                        <el-button size="mini" @click="dialogresetVisibleaddstudent = true">添加学生</el-button>
                    </template>


                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="showstudent(scope.$index, scope.row)">移除学生</el-button>
                    </template>

                </el-table-column>
            </el-table>


    </el-dialog>


    <template>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column label="序号" width="100">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{scope.$index }}</span>
                </template>
            </el-table-column>

            <el-table-column label="班级ID" width="100">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.classid }}</span>
                </template>
            </el-table-column>

            <el-table-column label="班级名称" width="100">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.classname}}</span>
                </template>
            </el-table-column>



            <el-table-column label="班级人数" width="100">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.classpeople }}</span>
                </template>
            </el-table-column>

                <el-table-column label="班级地点" width="100">
                    <template slot-scope="scope">

                        <span style="margin-left: 10px">{{ scope.row.classplace }}</span>
                    </template>
            </el-table-column>

                <el-table-column label="班级状态" width="100">
                    <template slot-scope="scope">

                        <span style="margin-left: 10px">{{ scope.row.classstate }}</span>
                    </template>
                </el-table-column>

            <el-table-column label="任课老师" width="100">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.classteacherid }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" @click="dialogFormVisible = true">新增班级</el-button>
                </template>


                <template slot-scope="scope">
                    <el-button size="mini" @click="showstudent(scope.$index, scope.row)">查看学生</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑班级</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>

        </el-table>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {

            value: [1, 4],
            user: {
                id: 0,
                username: 'TEST',
                tel: 'TEST',
                email: 'TEST'
            },
            studentgridData:[
                {
                    id: '1',
                    name: '1',
                    classid: '1'
                },
                {
                    id: '1213',
                    name: '1',
                    classid: '1'
                },
                {
                    id: '1241',
                    name: '1',
                    classid: '1'
                },
            ],
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialogFormVisiblestudent:false,
            dialogresetVisible: false,
            dialogresetVisibleaddstudent:false,
            form: {
                name: '',
                tel: '',
                email: ''
            },
            newtable:{
                username: '王小虎',
                tel: '145143141',
                email: "11231234123"
            },

            tableData: [{
                classid: '1',
                claasname: '王小虎',
                classpalce: '14511',
                classstate: "112123",
                classteacherid: "112",
                classpeople: "424",

            }],
        },
        created() {
            var that = this
            console.log('Vue 初始化完成 created')
            this.pushdata()
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            showstudent(index, row){
                this.dialogFormVisiblestudent=true
                console.log(index, row);
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.newtable={
                    id:row.id,
                    username: row.username,
                    email: row.email,
                    tel: row.tel
                }
                this.dialogresetVisible=true
            },
            handleDelete(index, row) {
                var that=this
                console.log(index, row);
                axios.post('/delete', {
                    id:row.id
                }).then(function (response) {
                    console.log(response);
                    that.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    that.pushdata()
                })
                    .catch(function (error) {
                        console.log(error);
                        that.$message({
                            message: '添加失败'
                        });
                    });
            },
            open1() {
                this.$message({
                    message: '添加成功!',
                    type: 'success'
                });
            },
            open2() {
                this.$message({
                    message: '添加失败'
                });
            },

            pushdata(){
                var that=this
                axios.get('/classlist')
                    .then(function (response) {
                        console.log(response.data);
                        that.tableData = response.data.data
                    })
                    .catch(function (error) {
                        console.log(error);
                        this.$message({
                            message: '查询失败'
                        });
                    });

            },

            update(){
                var that = this

                axios.post('/update', {
                    id:that.newtable.id,
                    username: that.newtable.username,
                    tel: that.newtable.tel,
                    email: that.newtable.email
                }).then(function (response) {
                    console.log(response);
                    that.dialogresetVisible = false
                    that.pushdata()
                    this.$message({
                        message: '修改成功!',
                        type: 'success'
                    });

                })
                    .catch(function (error) {
                        console.log(error);



                    });
            },
            add() {

                var that = this

                axios.post('/add', {
                    username: that.user.username,
                    tel: that.user.tel,
                    email: that.user.email
                }).then(function (response) {
                    console.log(response);
                    that.dialogFormVisible = false
                    that.pushdata()
                    that.open1();
                })
                    .catch(function (error) {
                        console.log(error);
                        that.open2();
                    });


            }
        },


    })
</script>

</html>